<template>
  <div class="form-designer-wrap">
<!--    <template v-for="config in configs">
      <form-designer-group v-if="config.isGroup" :config="config">
        <form-designer-item class="group-item-wrap" v-for="child in config.children" :key="child.key" :config="child"
                            :label-width="labelWidth"
                            @change="change"></form-designer-item>
      </form-designer-group>
      <form-designer-item v-else :key="config.key" :config="config" :label-width="labelWidth"
                          @change="change"></form-designer-item>
    </template>-->

    <form-designer-item v-for="config in configs" :key="config.key" :config="config" :label-width="labelWidth"
                        @change="change"></form-designer-item>
  </div>
</template>

<script>
import FormDesignerItem from './components/FormDesignerItem'
import FormDesignerGroup from './components/FormDesignerGroup'

export default {
  name: 'FormDesigner',
  props: {
    configs: {
      type: Array,
      default: () => []
    },
    labelWidth: {
      type: String,
      default: '60px'
    }
  },
  components: {
    FormDesignerItem,
    FormDesignerGroup
  },
  data() {
    return {}
  },
  methods: {
    change(data) {
      let { key, controlValue } = data

      let result = this.configs.reduce((r, c) => {
        r.push({
          ...c,
          controlValue: c.key === key ? controlValue : c.controlValue
        })
        return r
      }, [])

      this.$emit('change', result)
    }
  }
}
</script>

<style scoped lang="scss">
.form-designer-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .group-item-wrap:first-child {
    margin-top: 0;
  }
}
</style>
